<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/grade/list'}">等级规则管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增会员等级规则</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30" ref="form" :model="form" label-width="180px" style="width: 500px;">
          <el-form-item label="规则名称" prop="gradeName" :rules="[ { required: true, message: '规则名称不能为空'}]">
            <el-input v-model="form.gradeName"></el-input>
          </el-form-item>
          <el-form-item label="pc规则头像" prop="gradePhoto" :rules="[ { required: true, message: 'pc规则头像不能为空'}]">
            <el-upload
                class="avatar-uploader"
                :action="actionUrl + '?fileType=2&businessType=3'"
                :show-file-list="false"
                :on-success="imageSuccess"
                :file-list="imageList"
                >
                <img v-if="form.gradePhoto" :src="form.gradePhoto" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="手机规则头像" prop="phoneGradePhoto" :rules="[ { required: true, message: '手机规则头像不能为空'}]">
            <el-upload
                class="avatar-uploader"
                :action="actionUrl + '?fileType=2&businessType=3'"
                :show-file-list="false"
                :on-success="phoneImageSuccess"
                :file-list="phoneImageList"
                >
                <img v-if="form.phoneGradePhoto" :src="form.phoneGradePhoto" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item label="视频查看最小时长(分钟)" prop="watchMinTime">
            <el-input-number v-model="form.watchMinTime" :min="0" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="视频查看最大时长(分钟)" prop="watchMaxTime">
            <el-input-number v-model="form.watchMaxTime" :min="0" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="规则描述" prop="memo">
            <el-input v-model="form.memo" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          gradeName: '',
          gradePhoto: '',
          phoneGradePhoto: '',
          watchMinTime: 0,
          watchMaxTime: 0,
          memo: ''
        },
        imageList: [],
        phoneImageList: [],
      }
    },
    activated() {
      this.actionUrl = this.$api.upload()
      this.$refs.form.resetFields()
    },
    created() {
      this.actionUrl = this.$api.upload()
    },
    methods: {
      onSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$api.grade.add(this.form).then(res => {
              if(res.success) {
                this.$message.success('保存成功')
                this.$refs.form.resetFields()
                this.$router.push('/grade/list');
              }
            })
          }
        })
      },
      onReset() {
        this.$refs.form.resetFields()
      },
      imageSuccess(res, file) {
        this.form.gradePhoto = res.data.totalUrl
        this.$forceUpdate()
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      phoneImageSuccess(res,file){
        this.form.phoneGradePhoto = res.data.totalUrl
        this.$forceUpdate()
      }
    }
  }
</script>

<style>

 
</style>
